<template>
  <!--列表 -->
  <div class="flex-1 flex relative overflow-hidden">
    <BaseList :data-source="dataSource" :loading="loading" class="flex-1 overflow-auto pb-10">
      <template #renderItem="{ item }">
        <div
          :key="item.id"
          class="py-2 px-3 flex justify-between items-center list-items"
          :class="{ active: store.currentSuit?.id === item.id }"
          @click="onSelect(item)"
        >
          <div class="w-[80%]">
            <div class="name font-semibold mr-2">{{ item.templateName }}</div>
            <div class="mt-1 truncate text-xs text-gray-400">{{ item.description || '-' }}</div>
          </div>
          <div class="dropdown ml-1 -mr-1">
            <a-dropdown :key="item.id">
              <div class="px-2 py-1 hover:bg-gray-300 rounded flex items-center"><EllipsisOutlined :style="{ fontSize: '18px' }" /></div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1"> <BaseButton size="small" type="link" @click="onOpenAdd(item)">编辑</BaseButton> </a-menu-item>
                  <a-menu-item key="2">
                    <BaseButton confirm-text="确认删除？" danger size="small" type="link" @click="onDelete(item)">删除</BaseButton>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </template>
    </BaseList>
    <a-card v-if="!edit" class="absolute bottom-0 w-full">
      <BaseButton type="primary" block ghost :icon="h(PlusOutlined)" @click="onOpenAdd()"> 新增套餐 </BaseButton>
    </a-card>
    <AddModal v-model:open="openAdd" :template-type="templateType" :row-data="rowData" @success="getData" />
  </div>
</template>
<script setup>
import { computed, ref, watch, h } from 'vue'
import { message } from 'ant-design-vue'
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { post } from '@/utils/request'
import useSuitStore from '../suit-template/store'
import AddModal from './AddModal'

const store = useSuitStore()
const emit = defineEmits(['select'])
const props = defineProps({
  templateType: {
    description: '模板类型0：个人 1：全院 2：科室',
    type: [Number, String],
    default: null
  },
  searchKey: {
    description: '搜索关键字',
    type: String,
    default: ''
  },
  edit: {
    type: Boolean,
    default: false
  }
})
const openAdd = ref(false)
const rowData = ref(null)
const params = computed(() => {
  return {
    templateType: props.templateType,
    pyjm: props.searchKey
  }
})
const { loading, dataSource, getData } = useFetch({
  url: '/inp/zyys/getInpAdviceTemplateList',
  params,
  onSuccess: (data) => {
    if (data?.length) {
      store.currentSuit = data?.[0] || {}
      emit('select', data?.[0])
    }
  }
})
watch(
  () => props.templateType,
  () => getData(),
  { immediate: true }
)
// watch(
//   () => store.currentSuit.id,
//   () => getData(),
//   { immediate: true }
// )
const onOpenAdd = (row = {}) => {
  rowData.value = row
  openAdd.value = true
}
const onDelete = async (row) => {
  const { code, msg } = await post('/inp/zyys/delInpAdviceTemplate', {
    id: row.id
  })
  if (code !== 0) return message.error(msg)
  message.success('删除成功')
  getData()
}
const onSelect = (select) => {
  emit('select', select)
  store.currentSuit = select
}
defineExpose({
  getData
})
</script>
<style lang="less" scoped>
.list-items {
  cursor: pointer;
  &:hover {
    .dropdown {
      visibility: visible;
    }
  }
  &.active {
    .name {
      color: var(--primary-color);
    }
  }
  .dropdown {
    visibility: hidden;
    transition: all 0.3s;
  }
}
</style>
